<template>
  <div id="swiper">
    <swiper indicator-dots cirular="true" autoplay="true">
      <swiper-item>
        <img src="/static/images/logo.png" alt="" />
      </swiper-item>
      <swiper-item v-for="(item, index) in top3" :key="index">
        <img :src="item.cover" alt="item.title" @click="getDetail(item.id)" />
      </swiper-item>
    </swiper>

    <div id="buttons">
      <div>
        <span @click="getList('listen')">
          <img class="icons" src="/static/icons/listen.png" alt=" " />
        </span>
        <span @click="getList('full')">
          <img class="icons" src="/static/icons/full.png" alt="" />
        </span>
      </div>

      <div>
        <span @click="getList('match')">
          <img class="icons" src="/static/icons/match.png" alt="" />
        </span>
        <span @click="getList('read')">
          <img class="icons" src="/static/icons/read.png" alt="" />
        </span>
      </div>

      <div>
        <span @click="getList('translation')">
          <img class="icons" src="/static/icons/translation.png" alt="" />
        </span>
        <span @click="getList('write')">
          <img class="icons" src="/static/icons/write.png" alt="" />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  data() {
    return {
      top3: [],
    };
  },

  created: function () {
    this.getTop();
  },

  methods: {
    async getTop() {
      let response = await request({
        url: "/course_service/course/courseTop",
      });
      this.top3 = response.data.list;
    },

    async getDetail(id) {
      wx.navigateTo({
        url: `/pages/video/detail/main?id=${id}`,
      });
    },

    async getList(type) {
      wx.navigateTo({
        url: `/pages/index/list/main?type=${type}`,
      });
    },
  },
};
</script>

<style>
#swiper {
  margin-top: 5%;
}

#swiper swiper img {
  width: 100%;
  height: 100%;
}

.icons {
  margin: 4%;
  padding: 1%;
  width: 280rpx;
  height: 140rpx;
  border-radius: 30rpx;
  box-shadow: 36rpx 36rpx 60rpx #d1d9e6, -36rpx -36rpx 60rpx #fff;
}

#buttons {
  padding-top: 10%;
  text-align: center;
}
</style>
